import {btn} from "./my-btn.js";
import {order} from "./my-order.js";
import {myCoupon} from "./my-coupon.js";
import {userinfo} from "./user.js";

export function Render() {
    return `
    <style>
    /* 全局样式 */
    :root {
        --primary-color: #ff4400;
        --secondary-color: #e5e5e5a8;
        --text-color: #333;
        --light-text-color: #666;
        --border-color: #e5e5e5;
        --active-color: #ff4400;
        
    }
    
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
    }
    
    body {
        background-color: #f5f5f5;
        color: var(--text-color);
        -webkit-tap-highlight-color: transparent;
        font-size: 1.6rem; /* 16px */
    }
    
    .container {
       
        margin: 0 auto;
        min-height: 100vh;
        background-color: white;
        display: flex;
        flex-direction: column;
    }
    
    /* 头部样式 */
    .header {
        align-items: center;
        justify-content: space-between;
        padding: 2rem 3rem; /* 16px 20px */
        background:url("/src/images/topbackground.png") no-repeat center top / 100% 100%;
        border-bottom: 0.1rem solid var(--border-color); /* 1px */
        position: sticky;
        top: 0;
        z-index: 100;
    }
    .nav > img{
        width: 3rem; /* 25px */
        margin-right: 2rem; /* 10px */
    }
    .login{
        display: flex;
        margin-top: 6rem; /* 20px */
        align-items: center;
        justify-content: space-between;
    }
     .header-right {
        display: flex;
        gap: 1.5rem; /* 15px */
        color: var(--light-text-color);
        font-size: 3.6rem; /* 36px */
    }
    
    .header-left {
        display: flex;
        align-items: center;
        gap: 2rem; /* 10px */
    }
    
    .user-avatar {
        width: 8rem; 
        height: 8rem; 
        border-radius: 50%;
        background-color: #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    
    .user-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        margin-right: 1rem; /* 10px */
    }
    span{
        margin-top: 2rem; /* 10px */;
    
    }
    .login-text {
        font-size: 3rem; /* 20px */
        font-weight: 500;
        color: var(--text-color);
    }
    .image-size{
        width: 4rem;
    }
    /* 状态区域样式 - 从Grid改为Flexbox */
    .order-status, .coupon-section, .account-info {
        display: flex;
        padding: 2rem 0; /* 10px */
        border-bottom: 2rem solid var(--secondary-color); /* 8px */
    }
    
    /* 状态区域项目 - 添加flex基础样式 */
    .order-status .status-item,
    .coupon-section .coupon-item,
    .account-info .info-item {
        flex: 1;
    }
    
    .status-item, .coupon-item, .info-item, .button-item, .footer-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0.4rem; /* 4px */
        padding: 0.8rem 0; /* 8px */
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .status-item:hover, .coupon-item:hover, .info-item:hover, .button-item:hover, .footer-item:hover {
        transform: translateY(-0.2rem); /* 2px */
    }
    
    .status-item span, .coupon-item span, .info-item span, .button-item span, .footer-item span {
        font-size: 2.2rem; /* 16px */
        color: var(--text-color);
    }
    
    /* 账户信息样式 - 从Grid改为Flexbox */
    .account-info {
        flex-wrap: wrap;
    }
    
    /* 账户信息项目 - 每行4个 */
    .account-info .info-item {
        flex: 0 0 25%;
        max-width: 25%;
    }
    
    .info-item span:first-child {
        font-size: 2.2rem; /* 16px */
        font-weight: 500;
        color: var(--text-color);
        margin-bottom: 0.5rem; /* 5px */
    }
    
    .info-item span:last-child {
        font-size: 2.2rem; /* 16px */
        color: var(--light-text-color);
    }
    
    /* 功能按钮样式 - 已使用弹性盒子布局 */
    .function-buttons {
        display: flex;
        flex-wrap: wrap;
        padding: 1.5rem 0; /* 15px */
        border-bottom: 0.1rem solid var(--border-color); /* 1px */
        margin-bottom: 3.5rem;
    }
    
    .function-buttons .button-item {
        flex: 0 0 25%;
        max-width: 25%;
        padding: 2rem 0; /* 20px */
    }
    
    .button-item img {
        width: 4rem; /* 40px */
        height: 4rem; /* 40px */
        margin-bottom:1rem; /* 6px */
    }
    
    /* 响应式调整 */
    @media (max-width: 37.5rem) { /* 375px */
        .status-item span, .coupon-item span, .info-item span, .button-item span, .footer-item span {
            font-size: 2.2rem; /* 12px */
        }
    
        .user-avatar {
            width: 4rem; /* 40px */
            height: 4rem; /* 40px */
        }
    
        .login-text {
            font-size: 3rem; /* 14px */
        }
    
        .header {
            padding: 2rem 3rem; /* 12px 16px */
        }
    
        .header-left, .header-right {
            gap:2rem; /* 10px */
            font-size: 3.6rem; /* 18px */
        }
    }
    .pop-up{
        background-color:rgba(0, 0, 0, 0.4); ;
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 100;
    }
    .login-box{
        width: 100%;
        height: 50%;
        background-color:#fff ;
        border-radius: 2rem;
        position: fixed;
        bottom: 0;
        left: 0;
        padding: 3rem;
        
       
    }
    .prompt{
        font-size: 3rem;
        font-weight: 600;
        color: #999;
        margin-bottom: 8rem;
    }
    .prompt > div {
        margin-bottom: 2rem;
        
    }
    .close{
        float: right;
         margin:0;
    }
    .prompt > p {
        font-size: 2rem;
        color: #afb6c0;
    }
    .account , .pwd{
        display: flex;
        font-size: 2.5rem;
        justify-content: space-between;
        margin: 1rem 0;
    }
    .account div ,.pwd div{
        width: 10rem;
        height: 4rem;
        line-height: 4rem;
        text-align: center;
    }
    .account input,.pwd input{
        width: 35rem;
        font-size: 2.5rem;
    }
    .account div:last-child{
        color: #afb6c0;
    }
    .pwd div:last-child{
        
    }
    .rule{
        font-size: 2rem;
        color: red;
        margin: 1rem 0 1rem 10rem;
        visibility: hidden;
    }
    .enroll{
        width:100% ;
        height: 17rem;
        padding: 3rem;
    }
    .log-in-now{
        width: 80%;
        height: 5rem;
        font-size: 2.5rem;
        background-color: #3498db;
        border-radius: 2.5rem;
        text-align: center;
        line-height: 5rem;
        margin: 0 auto;
    }
    .sign-up-button {
        width: 10rem;
        height: 3rem;
        font-size: 2rem;
        text-align: center;
        line-height: 3rem;
        margin-top: 3.5rem;
        margin-left: 35rem;
    }
    .protocol{
        display: flex;
        font-size: 2rem;
        justify-content: space-around;
        padding: 0 3rem;
        margin-top: 8rem;
    }
    .protocol input{
        width: 2rem;
    }
    </style>
    <div class="container">
    <!-- 头部区域 -->
    <header class="header">
        <div class="nav ">
            <img src="/src/images/c47b048175b325b1e78f837a3b696794.png" class=" "></img>
            <img src="/src/images/f09ef51624e48d7d8c58cd602110c46e.png" class=" "></img>
        </div>
        <div class="login">
            <div class="header-left">
                <img src="/src/images/head.png" alt="用户头像" class="user-avatar">
                <span class="login-text">请先登录</span>
            </div>
            <div class="header-right">
                <img src="/src/images/f09ef51624e48d7d8c58cd602110c46e.png" class=" "></img>
            </div>
        </div>
    </header>

    <!-- 订单状态区域 -->
    <section class="order-status"></section>

    <!-- 优惠券区域 -->
    <section class="coupon-section"></section>

    <!-- 账户信息区域 -->
    <section class="account-info">
        <div class="info-item">
            <span>-- 元</span>
            <span>账户余额</span>
        </div>
        <div class="info-item">
            <span>-- 个</span>
            <span>积分</span>
        </div>
        <div class="info-item">
            <span>-- 张</span>
            <span>优惠券</span>
        </div>
        <div class="info-item wallet" >
            <img src="/src/images/wallet_icon.png" class="image-size"></img>
            <span>我的钱包</span>
        </div>
    </section>

    <!-- 功能按钮区域 -->
    <section  class="function-buttons"></section>
</div>
    <div class="pop-up">
            <div class="login-box">
                <div class="prompt">
                    <div>
                    <span>账号登录</span>
                    <span>短信登录</span>
                    <span class="close" >x</span>
                    </div>
                    <p>如果未设置过密码，请点击忘记密码</p>
                </div>
                <div class="input-box">
                    <div class="account">
                        <div>账号</div>
                        <input type="text" placeholder="请输入账号"></input>
                        <div>忘记密码</div>
                    </div>
                    <div class="rule acoutError" id="usernameError">请输入</div>
                    <div class="pwd">
                        <div>密码</div>
                        <input type="text" placeholder="请输入密码"></input>
                        <div></div>
                    </div>
                    <div class="rule pwdError" id="passwordError">请输入</div>
                </div>
                <div class="enroll">
                    <div class="log-in-now">立即登录</div>
                    <div class="sign-up-button">立即注册</div>
                </div>
                
                <div class="protocol">
                    <input type="radio"> 我已阅读并遵守
                    <div> 《用户协议》 </div>与
                    <div> 《隐私协议》 </div>
                </div>
            </div>
        </div>
    `
}

export function afterRender() {
    //加载订单状态区域
    let Order = document.querySelector(".order-status");

    order.forEach((item) => {

        Order.innerHTML += `
        <div class="status-item">
            <img src="${item.src}" class="${item.className} image-size"></img>
            <span>${item.name}</span>
        </div>
        `
    })
    //加载优惠券
    let coupons = document.querySelector(".coupon-section");
    myCoupon.forEach((item) => {
        coupons.innerHTML += `
        <div class="coupon-item">
            <img src="${item.src}" class="${item.className} image-size"></img>
            <span>${item.name}</span>
        </div>
        `
    })
    //加载功能按钮区域
    let fnc = document.querySelector(".function-buttons");
    btn.forEach(function (item, index) {
        fnc.innerHTML += `
         <div class="button-item">
            <img src="${item.src}" class="${item.className}"></img>
            <span>${item.name}</span>
         </div>
        `
    })
    //增加登录弹窗关闭功能
    let close = document.querySelector(".close");
    let popup = document.querySelector(".pop-up");
    close.addEventListener("click",(e)=>{
        e.preventDefault();
        // popup.style.display="none";
        popup.remove();
    })
    popup.addEventListener("touchend", (e)=>{

        if(e.target===popup){
            popup.style.display="none";
        }
    })
    //获取账号/密码输入值
    let account = document.querySelector(".account input");
    let pwd = document.querySelector(".pwd input");
    // 用户名验证函数
    function validateUsername(account) {
        // 4-10位字母开头，允许字母数字下划线
        const usernameRegex = /^[a-zA-Z][a-zA-Z0-9_]{3,9}$/gi;
        console.log("-----------")
        return usernameRegex.test(account);
    }

    // 密码验证函数
    function validatePassword(pwd) {
        // 8-20位，包含大小写字母和数字
        const passwordRegex = /^[a-zA-Z\d]{8,12}$/;
        return passwordRegex.test(pwd);
    }
    // 显示错误信息函数
    function showError(elementId, message) {
        const errorElement = document.getElementById(elementId);
        errorElement.textContent = message;
        errorElement.style.visibility="visible";
    }

    //给登录按钮绑定点击事件
    let loginnow = document.querySelector(".log-in-now");
    loginnow.addEventListener("touchend",(e)=>{
        if(document.querySelector(".protocol > input").checked){
            // 清除之前的错误信息
            console.log(document.querySelector(".protocol > input").checked)
            document.getElementById('usernameError').style.visibility = 'hidden';
            console.log("77777777")
            document.getElementById('passwordError').style.visibility = 'hidden';
            // 验证用户名

            if (!validateUsername(account.value.trim())) {
                showError('usernameError', '用户名必须是4-10位字母开头，允许字母数字下划线');
                return;
            }
            // 验证密码
            console.log(">>>>>>>>>>>")
            if (!validatePassword(pwd.value.trim())) {
                showError('passwordError', '请输入密码需8-12位，包含大小写字母和数字');
                return;
            }
            userinfo.forEach((item)=>{
                console.log(account.value.trim()===item.name);

                if(!(account.value.trim()===item.name)){
                    console.log("**********")
                    document.getElementById('usernameError').style.visibility = 'hidden';
                    showError('usernameError','用户名不存在')

                }else {

                    if(!(pwd.value.trim()===item.pwd)){
                        document.getElementById('passwordError').style.visibility = 'hidden';
                        showError('passwordError','密码输入错误')
                    }else {
                        // 登录成功时保存
                        localStorage.setItem('rememberedUsername',account.value.trim());

                        if (localStorage.getItem('rememberedUsername')) {

                            document.querySelector('.login-text').textContent = localStorage.getItem('rememberedUsername');
                        }
                        popup.style.display="none";
                    }

                }
        })
        }else {

        }

    })

    //给订单状态绑定点击事件
    let Dingdan = document.querySelectorAll(".order-status");
    Dingdan.forEach(item => {
        item.addEventListener("touchend", () => {
            location.hash = "#order";
        })
    })
    //给优惠卷绑定点击事件
    let CouponItem = document.querySelectorAll(".coupon-item");
    CouponItem.forEach(item => {
        item.addEventListener("touchend", (e) => {
            location.hash = "#coupon/list";
        })
    })

    let Wallet = document.querySelector(".wallet");
    Wallet.addEventListener("touchend", (e) => {
        location.hash = "#wallet";
    })

    //给功能按钮绑定点击事件
    let signIn = document.querySelectorAll(".button-item");
    signIn.forEach((item, index) => {
        item.addEventListener("touchend", () => {
            console.log(111)
            location.hash = "#/adsa";
        })
    })
}